<!-- 助力比赛 投票 -->
<template>
  <div id="assist-competition-vote" :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <van-search class="search-box" v-model="keyword" :background="datas.preview_color.isColor == 1 ? datas.preview_color.color : 'transparent'" shape="round" show-action :placeholder="datas.seach_text" @search="onSearch">
      <template #action>
        <van-button class="search-btn" round type="danger" size="small" style="width: 50px;" :color="datas.seach_btn_bg_color" @click="onSearch">搜索</van-button>
      </template>
    </van-search>

    <div class="list">
      <van-grid :column-num="2" :border="false">
        <van-grid-item v-for="item in list" :key="item.id">
          <div class="item b-radius-6">
            <div class="item-img b-radius-6">
              <img :src="item.participant_info && item.participant_info.picture" alt="" />
              <div class="item-ranking f-13 f-bold">排名：{{item.rank}}</div>
            </div>
            <div style="padding: 0.5rem 0.25rem;">
              <div class="context flex-a-c color-00001C">
                <div class="f-bold f-15 t-l name" style="flex: 1;">{{item.name}}</div>
                <div class="f-13 hot">{{item.score}}人气</div>
              </div>
              <van-button @click="toVote(item.id,item.activity_id)" class="vote-btn" round size="small" style="width: 100%;margin-top: 0.625rem;">{{datas.vote_text}}</van-button>
            </div>
          </div>
        </van-grid-item>
      </van-grid>

      <div v-if="list && list.length == 0">
        <van-empty description="暂无数据" />
      </div>
    </div>

    <div class="loadMore" v-if="isLoadMore" @click="getMoreData">
      {{ $i18n.t("加载更多") }}
    </div>
    <div class="loadMore" v-if="lastIndex == index && allLoaded">{{ $i18n.t("没有更多了") }}~~</div>
  </div>
</template>

<script>
// 自定义样式
const css = function () {
  if(this.datas.preview_color) {
    const {
      preview_color,seach_txt_color,seach_btn_txt_color,box_color,border_color,box_name_color,box_hot_color,
      vote_btn_bg,btn_text_color,seach_bg_color
    } = this.datas;

    return `
      .component-${this.id} {
          background-color: ${preview_color.color};
          background-image: url(${preview_color.isColor == 2 ? preview_color.image || emptyImage : ''});
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
      }
      .component-${this.id} .search-box .van-search__content{
        background-color: ${seach_bg_color}!important;
      }

      .component-${this.id} .search-box input ,.component-${this.id} .search-box i{
        color: ${seach_txt_color}!important;
      }
      .component-${this.id} .search-box input::-webkit-input-placeholder {
        color: ${seach_txt_color}!important;
      }
      .component-${this.id} .search-box .search-btn {
        color: ${seach_btn_txt_color}!important;
        border: none;
      }
      .component-${this.id} .list .item {
          background-color: ${box_color};
          border-color: ${border_color};
      }
      .component-${this.id} .list .item .name {
        color: ${box_name_color};
      }
      .component-${this.id} .list .item .hot {
        color: ${box_hot_color};
      }
      .component-${this.id} .list .item .vote-btn {
        background-color: ${vote_btn_bg.color};
        background-image: url(${vote_btn_bg.isColor == 2 ? vote_btn_bg.image || emptyImage : ''});
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        color: ${btn_text_color};
        border: none;
      }
  `;
  }
};
export default {
  props: ["id", "datas", "tabcontrol", 'lastIndex', 'index', "isBottom", "isLast"],
  data() {
    return {
      list: null,
      keyword: '',
      isLoadMore: false,
      page: 1,
      total_page: 0,
      allLoaded: false, // 全部数据已经加载完成
    };
  },

  created() {
    this.initData();
    this.getData();
  },

  components: {},

  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    }
  },

  mounted() {},
  watch: {
    isBottom:function(nval,oval) {
      if(nval){
        if (this.isLast && this.isLoadMore) {
          this.getMoreData();
        } else if(this.lastIndex == this.index){
          this.getMoreData();
        }
      }
    },
  },

  methods: {
    async getData() {
      let { result, msg, data } = await $http.get('plugin.assist-competition.frontend.assist-voting.index',{
        activity_id: this.datas.form.id, keyword: this.keyword
      },".");
      if(result == 0) return this.$toast(msg);
      this.list = data.data;

      this.total_page = data.last_page;
      if(this.total_page <= 1) {
        this.isLoadMore = false;
        this.allLoaded = true;
      } else {
        this.isLoadMore = true;
      }
    },
    onSearch() {
      this.initData();
      this.getData();
    },
    initData() {
      this.list = null;
      this.isLoadMore = false;
      this.page = 1;
      this.total_page = 0;
    },
    toVote( signup_record_id, activity_id ){
      this.$router.push(this.fun.getUrl("assistCompetitionDetails", { signup_record_id,activity_id }));
    },

    async getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        console.log("getMoreData", this.total_page);
      } else {
        this.page = this.page + 1;
        let { result, msg, data } = await $http.get('plugin.assist-competition.frontend.assist-voting.index',{
          activity_id: this.datas.form.id, keyword: this.keyword, page: this.page
        },".");
        if(result == 0) {
          this.page = this.page - 1;
          this.isLoadMore = false;
          this.allLoaded = true;
          return this.$toast(msg);
        }

        this.total_page = data.last_page;
        if(this.page < this.total_page) {
          this.isLoadMore = true;
        }else {
          this.allLoaded = true;
        }

        this.list = this.list.concat(data.data);
        this.$emit('setLoadMore', this.isLoadMore);
      }
    },
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.b-radius-6 {
  border-radius: 0.5rem;
  overflow: hidden;
}
.color-00001C {
  color: #00001C;
}
.list {
  padding: 0 4px 12px;
}
.item {
  background: #fff;
  padding: 0.3125rem;
  border: 2px solid #ffffff;
}
.item-img {
  position: relative;
  width: 10.125rem;
  height: 13.375rem;
  img{
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
  }
  .item-ranking {
    position: absolute;
    left: 0;
    bottom: 0;
    line-height: 20px;
    background: rgba(0, 0, 28, 0.5);
    padding: 0 10px 0 6px;
    color: #fff;
    border-top-right-radius: 8px;
  }
}
::v-deep .van-grid-item__content {
  background: transparent;
  padding: 8px 3px 0;
}
</style>
